<template>
    <el-dialog :title="titleStr" :visible.sync="data.bSwitch" width="500px">
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
            <el-form-item label="名称" prop="name">
                <el-input v-model="ruleForm.name" placeholder="请输入" style="width: 290px;"></el-input>
            </el-form-item>
            <el-form-item label="图片" prop="coverUrl">
                <el-upload 
                    class="avatar-uploader"
                    action="#"
                    ref="upload"
                    :show-file-list="false"
                    :before-upload="beforeAvatarUpload"
                    :http-request="uploadRequest">
                    <img v-if="ruleForm.coverUrl" :src="ruleForm.coverUrl" class="avatar">
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
            </el-form-item>
            <el-form-item label="归属地" prop="position">
                <el-select
                    v-model="ruleForm.position"
                    clearable
                    filterable
                    placeholder="请选择"
                    style="width: 290px;"
                >
                    <el-option v-for="dict in dict.type.template_own_type" 
                    :key="dict.value"
                    :label="dict.label"
                    :value="dict.value" />
                </el-select>
                </el-form-item>
            <el-form-item label="套系分类" prop="type">
                <el-select
                    v-model="ruleForm.type"
                    clearable
                    filterable
                    placeholder="请选择"
                    style="width: 290px;"
                >
                    <el-option v-for="dict in dict.type.template_cat_type" 
                    :key="dict.value"
                    :label="dict.label"
                    :value="dict.value" />
                </el-select>
            </el-form-item>
            <el-form-item label="权重" prop="weight">
                <el-input-number v-model="ruleForm.weight" controls-position="right" :min="0" :step="1" step-strictly></el-input-number>
            </el-form-item>
            <el-form-item label="状态" prop="status">
                <el-switch v-model="ruleForm.status" :active-value="1" :inactive-value="0"></el-switch>
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button @click="data.bSwitch = false">取 消</el-button>
            <el-button type="primary" @click="onSubmit">确 定</el-button>
        </span>
    </el-dialog>
</template>

<script>
import { addBanner, getBanner, updateBanner } from '@/api/banner'
import { uploadImgTencent } from '../../../api/banner'

export default {
    props: {
        data: {
            type: Object,
            default() {
                return {
                    id: null,
                    bSwitch: false
                }
            }
        }
    },
    dicts: ['template_cat_type', 'template_own_type'],
    data() {
        return {
            ruleForm: {
                name: null,
                coverUrl: null,
                weight: 0,
                status: 0,
                type: undefined,
                position: undefined
            },
            rules: {
                name: [
                    { required: true, message: '请输入', trigger: 'change' }
                ],
                weight: [
                    { required: true, message: '请选择', trigger: 'change' }
                ],
                coverUrl: [
                    { required: true, message: '请上传', trigger: 'change' }
                ],
                status: [
                    { required: true, message: '请选择', trigger: 'change' }
                ],
                type: [
                    { required: true, message: '请选择', trigger: 'change' }
                ],
                position: [
                    { required: true, message: '请选择', trigger: 'change' }
                ]
            }
        }
    },
    computed: {
        titleStr() {
            return this.data.id ? '修改' : '新增'
        }
    },
    created() {
        this.data.id && this.getDetail()
    },
    methods: {
        beforeAvatarUpload(file) {
            const isType = ['image/png', 'image/jpeg'].includes(file.type)
            const isLt20M = file.size / 1024 / 1024 < 20;

            if (!isType) {
                this.$message.error('上传头像图片只能是 JPG或PNG 格式!');
            }
            if (!isLt20M) {
                this.$message.error('上传头像图片大小不能超过 20MB!');
            }
            return isType && isLt20M;
        },
        uploadRequest(file) {
            const { name, size } = file.file
            const preanme = name.split('.')[0]
            const ext = name.replace(preanme, '')
            uploadImgTencent({ name, size, ext, type: 0, file: file.file }).then(res => {
                this.ruleForm.coverUrl = res.file.url;
            })
        },
        // 获取详情
        getDetail() {
            getBanner(this.data.id).then(res => {
                const { name, coverUrl, weight, status, type, position } = res.advert
                this.ruleForm.name = name
                this.ruleForm.coverUrl = coverUrl
                this.ruleForm.weight = weight
                this.ruleForm.status = status
                this.ruleForm.type = type
                this.ruleForm.position = position
            })
        },
        // 提交
        onSubmit() {
            this.$refs['ruleForm'].validate((valid) => {
                if (valid) {
                    if (this.data.id) {
                        this.updateSubmit({ uuid: this.data.id, ...this.ruleForm })
                    } else {
                        this.addSubmit(this.ruleForm)
                    }
                } else {
                    return false;
                }
            });
        },
        // 新增
        addSubmit(params) {
            addBanner(params).then(res => {
                this.$emit('refresh')
                this.$modal.msgSuccess("成功")
                this.data.bSwitch = false
            })
        },
        // 修改
        updateSubmit(params) {
            updateBanner(params).then(res => {
                this.$emit('refresh')
                this.$modal.msgSuccess("成功")
                this.data.bSwitch = false
            })
        }
    }
}
</script>

<style lang="scss" scoped>
::v-deep .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.avatar-uploader {
    height: 150px;
}
.avatar-uploader .el-upload:hover {
    border-color: #409EFF;
}

.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 290px;
    height: 150px;
    line-height: 150px;
    text-align: center;
}

.avatar {
    width: 290px;
    height: 150px;
    display: block;
}
</style>